<template>
	<m-layout title="线下支付">
		<m-block>
			<m-cell  title="开户银行" :rIcon="false" :des="config710" />
			<m-cell  title="收款户名" :rIcon="false" :des="config708">
				<m-button slot="right" hollow radius="10" @click="doCopy(config708)">复制户名</m-button>
			</m-cell>
			<m-cell title="收款卡号" :rIcon="false" :des="config709">
				<m-button slot="right" radius="10" hollow @click="doCopy(config709)">复制卡号</m-button>
			</m-cell>
		</m-block>
	
		<!-- <m-cell border="0" title="查看收款账户" @click="isShow = true">
			<m-tag text="提示" slot="left" spa="0 15 0 0" bgColor="#EAF2FB" color="#225CF3"></m-tag>
			<text slot="right" class="cell-right-text">去查看</text>
		</m-cell> -->
		
		

		<m-block class="from-box" spa="20 0 0 " gap="24">
			<m-cell title="加盟类型" gap="0 0 24" :rIcon="false" :rightText="ctype==1?'联盟门店':'连锁门店'" />
			<m-cell title="加盟费" gap="24 0 " :rIcon="false" :rightText="ctype==1?config621:config622" />
			<text class="from_text1" style="margin-top: 20rpx;">支付凭证</text>
			<uploadPhoto class="uploadPhoto" v-model="imgArr" length="4" placeholder="请上传支付凭证"></uploadPhoto>
		
			<view class="hint-2">
				<text>* 工作日 16:00 前转入可当天到账，</text>
				<text>16:00以后转入在1-2个工作日确认。</text>
			</view>
		</m-block>

		<m-button block spa="60 0 0" @click="verify" :loading="isLoading">提交申请</m-button>
		<!-- <m-button block spa="20 0 0" hollow @click="" >充值记录</m-button> -->
		<m-dialog v-model="isShow" :showConfirm="false" cancelText="关闭" mask>
			<m-block class="cell-box" gap="0 0" spa="20 0 50">
				
			</m-block>
		</m-dialog>
	</m-layout>
</template>

<script>
	import { buyStoreManager } from '@/api/Trade.js'
	import { mapState } from 'vuex'
	import { tbvRegister } from '@/api/Trade.js'
	export default {
		data() {
			return {
				ctype:'',
				isLoading: false,
				isShow: false,
				amount: '',
				bankcard: '',
				transferNo: '',
				imgArr: [],
			};

		},
		computed: {
			...mapState({
				config: state => state.general.config,
				devSetAppUser: state => state.temporary.devSetAppUser,
			}),
			config710() {
				return this.config[710]
			},
			config709() {
				return this.config[709]
			},
			config708() {
				return this.config[708]
			},
			config707() {
				return this.config[707]
			},
			config507() {
				return this.config[507]
			},
			config621() {
				return "￥" + this.config[621]
			},
			config622() {
				return "￥" + this.config[622]
			},
			
		},
		onLoad({ctype}) {
			this.ctype = ctype;
		},
		methods: {
			
			verify() {
				if (this.imgArr.length <= 0) {
					return this.Toast('请上传支付凭证')
				}
				this.tbvRegister()
			},
			async tbvRegister() {
				try{
					this.isLoading = true;
					const { success, msg } = await buyStoreManager({
						stype: Number(this.ctype),
						data:this.devSetAppUser,
						paytype: 4,
						voucher:this.imgArr.join(',')
					})
					
					this.isLoading = false;
					this.Toast(msg)
					
					if (success) {
						await this.sleep(1000)
						this.Jump({
							url: '/pages/mine/mine',
							mode: 4
						})
					}
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
				
			},
		},

	}
</script>

<style lang="scss">
	

	.from_text1 {
		display: block;
		font-size: 30rpx;
		font-weight: bold;
		color: #141418;
		padding-bottom: 20rpx;
	}
		

	.h1-title {
		
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #225CF3;
	}

	.bank-box {
		.dl {
			flex: 1;
			padding-left: 30rpx;

			.dt {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.dd {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

	}



	.hint-2 {
		padding: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;

		text:nth-of-type(2) {
			color: #F43040;
		}
	}
</style>